<template>
    <div class='_top-header'>
        <div class='_date-time'>
            <span class='date'>{{date}}</span>
            <span class='week'>{{week}}</span>
            <span class='time'>{{time}}</span>
        </div>
        <div class='_title'>数据运营中心</div>
    </div>
</template>

<script>
    import countTo from 'vue-count-to'
    export default {
        name : 'top-header',
        props : {
            showData : {
                type : Boolean,
                default : true
            },

            agentCount : {
                type : Number,
                default : 0
            },

            storeCount : {
                type : Number,
                default : 0
            },

            siteCount : {
                type : Number,
                default : 0
            }
        },

        data () {
            return {
                date : '',
                week : '',
                time : ''
            }
        },

        components: { countTo },

        methods : {
            dateTime () {
                var d = new Date()
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate()
                var week = '星期' + ['天', '一', '二', '三', '四', '五', '六'][d.getDay()]
                var hour = d.getHours()
                var minute = d.getMinutes()

                if(month < 10) {
                    month = '0' + month
                }

                if(day < 10) {
                    day = '0' + day
                }

                if(hour < 10) {
                    hour = '0' + hour
                }

                if(minute < 10) {
                    minute = '0' + minute
                }
                
                this.date = year + '/' + month + '/' + day
                this.week = week
                this.time = hour + ':' + minute

                setTimeout(() => {
                    this.dateTime()
                }, 1000)

            }
        },

        created () {
            this.dateTime()
        }
    }
</script>

<style scoped lang='scss'>
    ._top-header{
        width : 1341px;
        height : 106px;
        margin:auto;
        @include background('header.png');
        position:relative;
        background-size: 100% 100%;
    }

    ._date-time{
        position: absolute;
        left: -100px;
        bottom: 12px;
        color: #6ec3fe;

        .date, .time{
            font-size: 22px;
        }
        .time{
            margin-left: 10px;
        }
        .week{
            font-size: 20px;
            margin-left: 10px;
        }
    }

    ._title{
        font-size: 36px;
        color: #6ec3fe;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        letter-spacing: 10px;
    }

    ._data{
        position: absolute;
        right: -100px;
        bottom: 10px;
        color: #fff;
        font-size: 20px;

        ._data-name{
            position: relative;
            top: -2px;
        }

        ._agent-num{
            color: #06efff;
            font-size: 28px;
            margin-left: 10px;
        }

        ._store{
            margin-left: 20px;
        }

        ._store-num{
            color: #f6cc60;
            font-size: 28px;
            margin-left: 10px;
        }
    }
</style>